<template>
	<view class="circle-chat-wrap">
		<view class="container">
			<view class="life-circle-header bg-white w100">
				<customTabBar />
				<!-- <navigator hover-class="none" class="add" url="/pages/life-circle/add-circle-chat/index" /> -->
				<view class="search-wrap clear">
					<view :class="{ 'gender-search pull-left text-center': true, 'man-bg-color': isMan, 'woman-bg-color': isWoman }">
						<picker @change="handleGenderChange" :range="genderList">
							<view :class="{ 'picker gray': true, 'man': isMan, 'woman': isWoman }">
								<text :class="{ 'iconfontPT': true, 'iconnansheng_1': isMan, 'iconnvsheng': isWoman }"></text>
								{{ gender }}
							</view>
						</picker>
					</view>
					<view :class="{ 'input pull-left relative': true, 'man-bg-color': isMan, 'woman-bg-color': isWoman }">
						<text class="iconfontPT iconsousuo" catchtap="initGetDataFn"></text>
						<input v-model="search" placeholder-class="placeholder-fs" type="text" placeholder="搜索昵称" @change="handleSearch">
					</view>
				</view>
			</view>
			<view v-if="list.length" :class="{ 'circle-chat-list': true, 'man-bg-color': isMan, 'woman-bg-color': isWoman }">
				<dynamicTpl v-for="(item, i) in list" :key="i" :dynamicDate="item" @likeStateChange="handleLikeStateChange" :index="i"
				 :isMan="isMan" :isWoman="isWoman"></dynamicTpl>
			</view>
			<no-data class="x-y-center" v-else />
		</view>
		<homeTabBar :push="true" @push="handleJumpPush"/>
	</view>
</template>

<script>
	import {
		getAllCircleChat
	} from '../../.././apis/life-circle/index.js';
	import customTabBar from '../.././components/life-circle/custom-tab-bar.vue';
	import dynamicTpl from '../.././components/life-circle/dynamic-tpl.vue';
	import homeTabBar from '../.././home-tab-bar/index.vue';

	export default {
		data() {
			return {
				page: 1,
				gender: '全部',
				search: '',
				genderList: [
					'男生',
					'女生',
					'全部',
				],
				load: true,
				list: []
			}
		},
		components: {
			dynamicTpl,
			homeTabBar,
			customTabBar
		},
		computed: {
			isMan() {
				return this.gender === '男生'
			},
			isWoman() {
				return this.gender === '女生'
			}
		},
		onShow() {
			this.reset()
			this.getList()
		},
		onReachBottom() {
			if (this.load) {
				this.load = false;
				this.getList()
			}
		},
		methods: {
			reset() {
				this.page = 1
				this.list = []
			},
			handleSearch() {
				this.reset()
				this.$throttle(this.getList, 500)()
			},
			getList() {
				let sex = ''
				switch (this.gender) {
					case '男生':
						sex = 1
						break;
					case '女生':
						sex = 2
						break;
				}
				const params = {
					sex,
					page: this.page,
					name: this.search,
				}
				this.$loading.show()
				getAllCircleChat(params).then(res => {
					if (+res.code === 200) {
						this.$loading.hide()
						this.list.push(...res.data)
						if (res.data.length) {
							this.page = this.page + 1
							this.load = true
						} else {
							this.load = false
						}
					}
				})
			},
			handleLikeStateChange(i, isLike) {
				let likeNumber = this.list[i].fabulous

				if (isLike) {
					this.list[i].dz_state = 1
					this.list[i].fabulous = likeNumber + 1
				} else {
					this.list[i].dz_state = 0
					this.list[i].fabulous = likeNumber - 1
				}
			},
			handleGenderChange(e) {
				let i = e.detail.value
				this.gender = this.genderList[i]
				this.reset()
				this.getList()
			},
			handleJumpPush(){
				uni.navigateTo({
					url:'/pages/life-circle/add-circle-chat/index'
				})
			}
		}
	}
</script>

<style lang="less">
	.circle-chat-wrap {
		padding-bottom: 210rpx;

		.man-bg-color {
			background: rgba(244, 248, 251, 1) !important;
		}

		.woman-bg-color {
			background: rgba(251, 244, 244, 1) !important;
		}

		.man-border-color {
			border-top-color: rgba(244, 248, 251, 1) !important;
		}

		.woman-border-color {
			border-top-color: rgba(251, 244, 244, 1) !important;
		}

		.life-circle-header {
			padding: 20rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;

			.search-wrap {
				padding: 30rpx 35rpx 0rpx 25rpx;
				height: 60rpx;

				.gender-search {
					.picker {

						&.man,
						.iconfontPT.iconnansheng_1 {
							font-size: 26rpx;
							margin-right: 12rpx;
							color: #0681DD;
						}

						&.woman,
						.iconfontPT.iconnvsheng {
							font-size: 26rpx;
							margin-right: 12rpx;
							color: #FF5C91;
						}
					}

					width: 160rpx;
					background: #f8f8f8;
					height: 60rpx;
					border-radius: 30rpx;
					line-height: 60rpx;
					font-size: 26rpx;
				}

				.input {
					&.man-bg-color {
						background: rgba(244, 248, 251, 1);
					}

					&.woman-bg-color {
						background: rgba(251, 244, 244, 1);
					}

					.iconsousuo {
						position: absolute;
						left: 35rpx;
						top: 8rpx;
						font-size: 28rpx;
					}

					width: calc(100% - 185rpx);
					height: 60rpx;
					border-radius: 100rpx;
					background:#f8f8f8;
					margin-left: 25rpx;

					input {
						padding: 4px 37px 4px 38px;
					}
				}
			}
		}

		.add {
			width: 145rpx;
			height: 145rpx;
			position: fixed;
			bottom: 15%;
			right: 0;
			background: url();
			background-size: cover;
		}

		.circle-chat-list {
			background: #f8f8f8;
			margin-top: 165rpx;
		}
	}
</style>
